<template>
    <div class="title">
        我的课表
    </div>
    <div class="option">
        <span>周次：</span>
        <el-select
            v-model="value"
            :empty-values="[null, undefined]"
            :value-on-clear="null"
            placeholder="Select"
            style="width: 240px"
            @change="(val: any) => selectWeekChange(val)"
        >
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
        </el-select>
        
        <el-button @click="exportExcel" style="margin-left: 20px" type="primary">打印</el-button>
    </div>
    <table id="courseTable" ref="courseTable" class="course-table">
        <thead style="background-color: rgba(156,221,255,0.2)">
        <tr>
            <th style="border-top-left-radius: 10px;"></th>
            <th>星期日</th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
            <th style="border-top-right-radius: 10px;">星期六</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td style="background-color: rgba(156,221,255,0.2)">1-2</td>
            <template v-for="time in row">
                <td v-if="getCourse('1-2',time) == ''"></td>
                <td v-else>
                    <p>{{ getCourse('1-2', time).courseName }}</p>
                    <p>{{ getCourse('1-2', time).weeks }}(周)</p>
                    <p>{{ getCourse('1-2', time).campus }}{{ getCourse('1-2', time).location }}</p>
                    <p>{{ getCourse('1-2', time).teacherName }}</p>
                </td>
            </template>
        </tr>
        <tr>
            <td style="background-color: rgba(156,221,255,0.2)">3-4</td>
            <template v-for="time in row">
                <td v-if="getCourse('3-4',time) == ''"></td>
                <td v-else>
                    <p>{{ getCourse('3-4', time).courseName }}</p>
                    <p>{{ getCourse('3-4', time).weeks }}(周)</p>
                    <p>{{ getCourse('3-4', time).campus }}{{ getCourse('3-4', time).location }}</p>
                    <p>{{ getCourse('3-4', time).teacherName }}</p>
                </td>
            </template>
        </tr>
        <tr>
            <td style="background-color: rgba(156,221,255,0.2)">5-6</td>
            <template v-for="time in row">
                <td v-if="getCourse('5-6',time) == ''"></td>
                <td v-else>
                    <p>{{ getCourse('5-6', time).courseName }}</p>
                    <p>{{ getCourse('5-6', time).weeks }}(周)</p>
                    <p>{{ getCourse('5-6', time).campus }}{{ getCourse('5-6', time).location }}</p>
                    <p>{{ getCourse('5-6', time).teacherName }}</p>
                </td>
            </template>
        </tr>
        <tr>
            <td style="background-color: rgba(156,221,255,0.2)">7-8</td>
            <template v-for="time in row">
                <td v-if="getCourse('7-8',time) == ''"></td>
                <td v-else>
                    <p>{{ getCourse('7-8', time).courseName }}</p>
                    <p>{{ getCourse('7-8', time).weeks }}(周)</p>
                    <p>{{ getCourse('7-8', time).campus }}{{ getCourse('7-8', time).location }}</p>
                    <p>{{ getCourse('7-8', time).teacherName }}</p>
                </td>
            </template>
        </tr>
        <tr>
            <td style="background-color: rgba(156,221,255,0.2)">9-10</td>
            <template v-for="time in row">
                <td v-if="getCourse('9-10',time) == ''"></td>
                <td v-else>
                    <p>{{ getCourse('9-10', time).courseName }}</p>
                    <p>{{ getCourse('9-10', time).weeks }}(周)</p>
                    <p>{{ getCourse('9-10', time).campus }}{{ getCourse('9-10', time).location }}</p>
                    <p>{{ getCourse('9-10', time).teacherName }}</p>
                </td>
            </template>
        </tr>
        <tr>
            <td style="background-color: rgba(156,221,255,0.2);border-bottom-left-radius: 10px">11-12</td>
            <template v-for="time in row">
                <template v-if="time == 7">
                    <td style="border-bottom-right-radius: 10px" v-if="getCourse('11-12',time) == ''"></td>
                    <td style="border-bottom-right-radius: 10px" v-else>
                        <p>{{ getCourse('11-12', time).courseName }}</p>
                        <p>{{ getCourse('11-12', time).weeks }}(周)</p>
                        <p>{{ getCourse('11-12', time).campus }}{{ getCourse('11-12', time).location }}</p>
                        <p>{{ getCourse('11-12', time).teacherName }}</p>
                    </td>
                </template>
                <template v-else>
                    <td v-if="getCourse('11-12',time) == ''"></td>
                    <td v-else>
                        <p>{{ getCourse('11-12', time).courseName }}</p>
                        <p>{{ getCourse('11-12', time).weeks }}(周)</p>
                        <p>{{ getCourse('11-12', time).campus }}{{ getCourse('11-12', time).location }}</p>
                        <p>{{ getCourse('11-12', time).teacherName }}</p>
                    </td>
                </template>
            </template>
        </tr>
        </tbody>
    </table>
</template>

<script setup lang="ts">
import {getStudentScheduleInfo} from "@/service/student/student.service";
import {computed, onMounted, ref} from "vue";
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx'

const tableData = ref<any>([])
const row = 7
const value = ref('')
const options = ref([
    {
        value: '',
        label: '全部',
    }])
const selectWeeks = ref('');
const courseTable = ref<HTMLElement | null>(null);

onMounted(() => {
    getStudentScheduleInfo((data: any) => {
        for (const scheduleInfo of data.schedules) {
            tableData.value.push(scheduleInfo)
        }
    })
    
    for (let i = 1; i < 31; i++) {
        options.value.push({
            value: String(i),
            label: `第${String(i)}周`,
        })
    }
})

/**
 * 获取对应星期对应节次的课程
 * @param time 节次
 * @param date 星期
 */
function getCourse(time: any, date: any): any | undefined {
    let find = false
    for (const course of filteredTableData.value) {
        if (Number(course.date) == (date - 1)) {
            if (course.time === time) {
                find = true
                return course
            }
        }
    }
    if (!find) {
        return ''
    }
}

/**
 * 选择对应周数
 * @param val 第几周
 */
function selectWeekChange(val: any) {
    selectWeeks.value = val
}

const filteredTableData = computed(() => {
    if (selectWeeks.value === '') {
        return tableData.value
    }
    return tableData.value.filter((course: any) => {
        const parts = course.weeks.split("-");
        // 去除前导零并转换为字符串
        const part1 = Number(parts[0]);
        const part2 = Number(parts[1]);
        return Number(selectWeeks.value) >= part1 && Number(selectWeeks.value) <= part2
    })
})

function exportExcel() {
    window.print()
    let name = "课表"
    /* generate workbook object from table */
    var wb = XLSX.utils.table_to_book(document.querySelector('#courseTable'))
    /* get binary string as output */
    var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
    })
    console.log(new Blob([wbout]))
    try {
        FileSaver.saveAs(new Blob([wbout], {
            type: 'application/octet-stream'
        }), name + '.xlsx')
    } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
    }
    return wbout
}

</script>

<style scoped>
table {
    border-radius: 10px;
    border-spacing: 0;
    border: 1px solid rgba(0, 0, 0, 0.28);
    margin: 0 auto 0 auto;
}

.course-table th {
    min-width: 100px;
    text-align: center;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.28);
    font-size: 13px;
}

.course-table td {
    min-width: 100px;
    text-align: center;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.28);
    font-size: 13px;
}

.title {
    font-size: 20px;
    margin-bottom: 10px;
}

.option {
    margin-bottom: 20px;
}
</style>